<template>
<div>
	<el-table
		ref="table"
		:data="tableData"
		style="width: 90%;margin: 20px;"
		row-key="id"
		:row-class-name="rowClassName"
		:cell-class-name="cellClassName"
		:span-method="objectSpanMethod"
		@cell-click="cellClick"
		border>
<!--		@cell-click="cellClick"-->
		<!--<el-table-column type="expand" :width="1">
			<template slot-scope="props">
				<el-form label-position="left" inline class="demo-table-expand">
					<el-form-item label="商品名称">
						<span>{{ props.row.name }}</span>
					</el-form-item>
					<el-form-item label="所属店铺">
						<span>{{ props.row.shop }}</span>
					</el-form-item>
					<el-form-item label="商品 ID">
						<span>{{ props.row.id }}</span>
					</el-form-item>
					<el-form-item label="店铺 ID">
						<span>{{ props.row.shopId }}</span>
					</el-form-item>
					<el-form-item label="商品分类">
						<span>{{ props.row.category }}</span>
					</el-form-item>
					<el-form-item label="店铺地址">
						<span>{{ props.row.address }}</span>
					</el-form-item>
					<el-form-item label="商品描述">
						<span>{{ props.row.desc }}</span>
					</el-form-item>
				</el-form>
			</template>
		</el-table-column>-->
		<el-table-column
			v-for="item in tableColumn"
			:key="item.prop"
			:prop="item.prop"
			:label="item.label"
			:width="item.width">
			<template slot-scope="scope">
				<template v-if="item.prop === 'name'">
					<template v-if="!scope.row.show">
						<i class="expand-icon el-icon-plus" @click="e => handleExpand(e, scope)"></i>
						<span>{{scope.row.name}}</span>
					</template>
					<div v-if="scope.row.show">
						<el-table
							class="child-table"
							row-key="id"
							:show-header="false"
							:data="handleChildTableData(scope)">
							<el-table-column
								v-for="column in childTableColumn"
								:key="column.prop"
								:prop="column.prop"
								:label="column.label"
								:width="column.width">
							</el-table-column>
						</el-table>
					</div>
				</template>

				<template v-if="item.prop !== 'name'">
					{{scope.row[item.prop]}}
				</template>
			</template>
		</el-table-column>
	</el-table>
</div>
</template>

<script>
  export default {
    name: "index",
		data() {
			return {
				tableColumn: [
					{
						prop: "date",
						label: "日期",
						width: 100
					},
					{
						prop: "name",
						label: "名称",
						width: 100
					},
					{
						prop: "address",
						label: "地址",
						width: 100
					},
					{
						prop: "age",
						label: "年龄",
						width: 100
					},
				],
				tableData: [
					{
					id: 1,
					date: '2016-05-02',
					name: 'b1',
					address: '上海市普陀区金沙江路 1518 弄',
					age: 20,
					show: false,
				}, {
					id: 2,
					date: '2016-05-04',
					name: 'b2',
					address: '上海市普陀区金沙江路 1517 弄',
					age: 21,
					show: false
				}, {
					id: 3,
					date: '2016-05-01',
					name: 'b3',
					address: '上海市普陀区金沙江路 1519 弄',
					age: 23,
					show: false,
					childData: [
						{
							id: 13,
							date: '2016-05-01',
							name: 'b13',
							address: '北京市',
							age: 23,
							show: false
						}
					]
				}, {
					id: 4,
					date: '2016-05-03',
					name: 'b6',
					address: '上海市普陀区金沙江路 1516 弄',
					age: 24,
					show: false
				}
				],
				childTableColumn: []
			}
		},
		created() {
    	let new_column = JSON.parse(JSON.stringify(this.tableColumn));
    	this.childTableColumn = new_column.slice(1);
    	let obj = this.childTableColumn[this.childTableColumn.length - 1];
			obj.width = obj.width - 1;
		},
		methods: {
			handleExpand(e, scope) {
				console.log(e);
				console.log(scope);
				let {$index} = scope;
				let _row = document.querySelector(".row-" + $index);
				console.log(_row.querySelectorAll(".column-collapse"))
				// cell.parentNode.querySelectorAll(".column-collapse").forEach(td => {
				// 	if (td.className.indexOf("hide") > -1) {
				// 		td.classList.remove("hide");
				// 		cell.setAttribute("colspan", 1);
				// 		row.show = false;
				// 	} else {
				// 		td.classList.add("hide");
				// 		cell.setAttribute("colspan", 3);
				// 		row.show = true;
				// 	}
				// });
			},
			rowClassName({rowIndex}) {
				return `row-${rowIndex}`;
			},
			cellClassName({columnIndex}) {
				if (columnIndex > 1)
				return `column-collapse`;
			},
			cellClick(row, column, cell) {
				console.log(row)
				cell.parentNode.querySelectorAll(".column-collapse").forEach(td => {
					if (td.className.indexOf("hide") > -1) {
						td.classList.remove("hide");
						cell.setAttribute("colspan", 1);
						row.show = false;
					} else {
						td.classList.add("hide");
						cell.setAttribute("colspan", 3);
						row.show = true;
					}
				});
			},
			handleChildTableData(scope) {
				console.log(scope);
				let list = scope.row.childData.slice();
				list.unshift(scope.row)
				return list;
			},
			handleCreateHtml() {
				// return createElement('h1', "aa")
			},
			toogleExpand(e, scope) {
				let span = e.target;
				console.log(span);
				let _span = document.createElement("span");
				_span.innerHTML = scope.row.address;
				span.appendChild(_span);
				console.log(scope);
				scope.column.colSpan = 3;
				// scope.row.show = true;
				// let $table = this.$refs.table;
				// $table.toggleRowExpansion(row);
				// $table.doLayout();
			},
			objectSpanMethod({ rowIndex, columnIndex }) {
				if (columnIndex === 0) {
					if (rowIndex % 2 === 0) {
						return {
							rowspan: 2,
							colspan: 1
						};
					} else {
						return {
							rowspan: 0,
							colspan: 0
						};
					}
				}
			},
			load(tree, treeNode, resolve) {
				setTimeout(() => {
					resolve([
						{
							id: 31,
							date: '2016-05-01',
							name: 'a1',
							address: '上海市普陀区金沙江路 1519 弄'
						}, {
							id: 32,
							date: '2016-05-01',
							name: 'a2',
							address: '上海市普陀区金沙江路 1519 弄'
						}
					])
				}, 1000)
			}
		},
  }
</script>

<style lang="scss">
	.el-table__expand-column .cell {
		display: none;
	}
	.hide {
		display: none;
	}
	.el-table--border .child-table {
		.el-table__row {
			td:last-child {
				border-right-width: 0;
			}
		}
	}
	.expand-icon {
		color: #01b27a;
		cursor: pointer;
		border: 1px solid #01b27a;
		padding: 1px 2px;
		margin-right: 5px;
		font-size: 12px;
	}
</style>
